<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios使用</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script crossorigin="anonymous" src='https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
</head>

<body>
    <div class="container">
        <h2 class="page-header">与 json-server 结合</h2>
        <button class="btn btn-primary" onclick="sendGET()"> 获取所有的电脑信息 </button>
        <button class="btn btn-warning" onclick="sendPOST()"> 新建电脑信息 </button>
        <button class="btn btn-danger" onclick="getComputer()"> 检索数据 </button>
        <button class="btn btn-success" onclick="sendPUT()"> 更新电脑信息 </button>
        <button class="btn btn-info" onclick="sendPatch()"> 局部更新 </button>
        <button class="btn btn-danger" onclick="sendDELETE()"> 删除电脑信息 </button>
        <hr>
        <form class="form-inline addForm" name="computerForm">
            <div class="form-group">
                <label for="exampleInputName2">品牌</label>
                <input type="text" name="brand" class="form-control" id="exampleInputName2">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">价格</label>
                <input type="text" name="price" class="form-control" id="exampleInputEmail2" placeholder="">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">颜色</label>
                <input type="text" name="color" class="form-control" id="exampleInputEmail2" placeholder="">
            </div>
            <button type="button" class="btn btn-default" onclick="addComputer()">新增电脑信息</button>
        </form>
        <hr>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <td>id</td>
                    <td>品牌</td>
                    <td>价格</td>
                    <td>颜色</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
            
        </table>
    </div>
    <script>
        /**
         * GET /computers：列出所有商品
         * POST /computers：新建一个商品
         * GET /computers/156：获取某个指定商品的信息
         * PUT /computers/156：更新某个指定商品的信息（提供该商品的全部信息）
         * PATCH /computers/156：更新某个指定商品的信息（提供该商品的部分信息）
         * DELETE /computers/156：删除某个商品
         */
        //1. 创建 json-server 服务
        //2. 发送请求

        async function sendGET(){
            $('tbody').html('');
            let {data} = await axios.get('http://localhost:3000/compter');
            data.forEach(computer=>{
                $('tbody').append(`
                    <tr>
                        <td>${computer.id}</td>
                        <td>${computer.brand}</td>
                        <td>${computer.price}</td>
                        <td>${computer.color}</td>
                        <td><button class="btn btn-danger btn-sm" data-ff="666" data-id="${computer.id}" >删除</button></td>
                    </tr>
                `)
            })
        }
        /**
         *  新增电脑
         *  1. 获取文本框中的数据
         *  2. 将数据拼接成请求体数据
         *  3. 发送 ajax请求
         *  4. 清除 表单数据
         *  5. 刷新列表
         * 
         */
        async function addComputer(){
            // 通过name获得表单元素的数据
            // 此处 brand price color 是input元素
            let {brand, price, color} = document.computerForm;
            console.log(brand, price, color);
            // 获取Input文本框的值
            brand = brand.value.trim();
            price = price.value.trim();
            color = color.value.trim();
            // 2. 发送axios请求   post    http://localhost:3000/computers
            let res = await axios.post('http://localhost:3000/computers',{brand,price,color});
            if(res){
                // 重置表单值
                document.computerForm.reset();
                // 刷新列表就是重新执行一下 sendGET方法
                sendGET();
            }
        }
        // 父级元素   事件     事件源
        $('tbody').on('click','.btn',async function(){
            // 通过元素标签的data-set 获取id值  <元素标签 data-属性名='属性值'/>   元素标签.dataset.属性名
            let id = this.dataset.id;
            try{
                await axios.delete(`http://localhost:3000/computers/${id}`)
                // 移除当前tr
                $(this).parents('tr').remove();
            }catch(e){
                console.log('网络连接异常！');
            }
        })
       
    </script>
</body>

</html>